<template>
  <a-tag :class="kebabCase(statusName)">{{ statusName }}</a-tag>
</template>

<script setup>
import { useStore } from 'vuex'
import { useDict } from '@/hooks/useDict.js'
import { ref, watch } from 'vue'
import { kebabCase } from 'lodash-es'
const props = defineProps({
  status: Number
})
const statusName = ref('')
const store = useStore()
const dict = useDict(store)
const getStatusName = () => {
  store.dispatch('dict/getClientStatusTypes').then(() => {
    const clientStatusType = dict.value.clientStatusTypes.find(item => item.value === props.status)
    statusName.value = clientStatusType ? clientStatusType.text : ''
  })
}
getStatusName()
watch(
  () => props.status,
  () => {
    getStatusName()
  }
)
</script>

<style lang="less" scoped>
.assigned {
  background-color: #fafbcd;
  color: #a59947;
}
.assigned {
  background-color: #c1f9d4;
  color: #599455;
}
.system-recycled {
  background-color: #ffe5d9;
  color: #c1876e;
}
.frozen {
  background-color: #bae1ff;
  color: #5b7895;
}
</style>
